iT邦幫忙

2022 iThome 鐵人賽

DAY 16
1
Modern Web

我與 Blazor 的 30 天系列 第 16

ASP.NET Core Blazor 系列 - 016 身分驗證 Bearer Token

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

今日會展示在 Blazor 中,介紹如何儲存 Token 和存放的幾種位置以及他們的優缺點,還有帶著 Token 發送API

Token 怎麼儲存

拿到 Token 後,應該放哪裡呢 ?
在前端可以存放資料的地方不多,主要有三個地方 記憶體、Cookie、localStorage

記憶體

在拿到伺服器回傳的 Token 後就是在記憶體內,Token 是一種憑證理論上他應該受到保護,用完即丟不要存在任何的地方,這樣安全性是最高的,可是實際上如果一個網頁,不斷地要求使用者進行登入,應該很快就會被罵翻了,所以儲存在其他的方的需求產生了,只要 Token 的效期還沒有到就可以對後端資源做存取

Cookie

  1. 可以設定效期
  2. 使用 HttpOnly 和 Secure Cookie,可以防止 Javascript 存取
  3. 如果 Token 太大可能會沒辦法放進 Cookie 內
  4. 需注意 CSRF 攻擊

localStorage

  1. 使用上方便
  2. 較容易被 XSS 攻擊

完善登入流程

1. 登入頁面處理

看到昨天建立的 Login.razor,注入 JS Runtime

@inject IJSRuntime Js

登入後取得 Token ,再將 Token 儲存到 localStorage 中

 private async Task HandleValidSubmit()
    {
        var token = await(await Http.PostAsJsonAsync("api/Authorize/Login", loginDto)).Content.ReadAsStringAsync();
        // 將 Token 寫入 localStorage
        await Js.InvokeVoidAsync("localStorage.setItem", "token", $"{token}").ConfigureAwait(false);
    }

2. 將登入按鈕放到右上角

MainLayout.razor內,將 About 取代成登入

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="login">登入</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

3. 為 Server 專案的 API 加入 Authorize

我們將範例的 WeatherForecast 內的 Get 修改成需要身份驗證

[HttpGet]
[Authorize]
public IEnumerable<WeatherForecast> Get()
{
    return Enumerable.Range(1, 5).Select(index => new WeatherForecast
    {
        Date = DateTime.Now.AddDays(index),
        TemperatureC = Random.Shared.Next(-20, 55),
        Summary = Summaries[Random.Shared.Next(Summaries.Length)]
    })
    .ToArray();
}

4. 處理 Client 專案 FetchData.razor

我們在 WeatherForecast 內的 API 加上 Authorize 直接呼叫就會是 401 未授權,所以需要再發出 API Request時帶上 Token

在最上面加入需要用到的服務

@inject IJSRuntime Js
@inject NavigationManager NavigationManager

寫一個方法讀取 Token

 private string Token = string.Empty;

    private async Task GetToken()
    {
        Token = await Js.InvokeAsync<string>("localStorage.getItem", "user").ConfigureAwait(false);
    }

修改原本的取資料的方法

 protected override async Task OnInitializedAsync()
    {
        await GetToken();
        if (string.IsNullOrWhiteSpace(Token))
        {
            NavigationManager.NavigateTo($"/login", false);
            return;
        }
        var requestMsg = new HttpRequestMessage(HttpMethod.Get, $"/api/weatherforecast/{DateTime.Now.ToString("yyyy-MM-dd")}");
        requestMsg.Headers.Add("Authorization", $"Bearer {Token}");
        var response = await Http.SendAsync(requestMsg);

        if (response.IsSuccessStatusCode)
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
    }

若沒有 Token 會將使用者導向登入頁面

小結

在這一個章節我們完成了基本的權限驗證,如果沒有登入的狀態下點選,FatchData 頁面會直接導向登入頁,待拿到 Token 後才可以進入頁面並且撈取資料,有人可能會有疑惑為什麼 Token 沒有在 Client 專案中驗證呢? 這是一個非常重要的知識點

在 Blazor WebAssembly 應用程式中,授權檢查是可以被略過的,因為使用者可以修改所有的用戶端程式碼。 這同樣也適用於所有的用戶端應用程式技術,包括 JavaScript SPA 架構或任何作業系統的原生應用程式。

前端是不安全的,不可以相信前端,在 Blaozr WebAssembly 你可以做頁面的導向,沒有登入時跳轉到登入頁,可以設定哪些權限可以看到哪些頁面,但是這些在前端都是可以被修改的,真正的驗證應該在後端,就算前端使用者用了一些方法抵達權限不足的頁面,他在提取資料時也後端也不可以放行

下個章節預計會介紹頁面導向與路由


上一篇
ASP.NET Core Blazor 系列 - 015 身分驗證 登入畫面
下一篇
ASP.NET Core Blazor 系列 - 017 路由與導向(1) 路由 Routing
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言